<template>
	<view class="theme-page-bg padding-20">
		<NavBar :titleObj="titleObj"></NavBar>
		<ScrollView :contentHeight="contentHeight">
			<template #content>
				<ShopIntro class="m-t-30" :shopIntro="shopInfo" />
				<TabScroll class="m-t-30" :tabList="tabList" />
				<view class="m-t-30 bg-w border-r30 bg-item">
					<NavTitle :titleObj="{ title: '打针服务',hidden: true }" />
					<view v-for="(item,index) in list" :key="index">
						<ServiceItem :dataItem="item" v-if="item.category_id==28" :showCart="true" :showButton="true" />
					</view>
				</view>
				<view class="m-t-30 bg-w border-r30 bg-item">
					<NavTitle :titleObj="{ title: '打针套餐',hidden: true }" />

					<view>
						<MealItem v-for="(item,index) in list2" @click="toDetail" :key="index" :dataItem="item" :width="324" :height="324" :showButton="true" />
					</view>
				</view>
			</template>
		</ScrollView>
	</view>
</template>

<script setup lang="ts">
	import NavBar from '@/components/accompany/navBar/index.vue';
	import ScrollView from '@/components/accompany/scrollView/scrollView.vue';
	import ShopIntro from '@/components/shopIntro/index.vue';
	import TabScroll from '@/components/accompany/tabbar/order/tabsScroll/index.vue'
	import NavTitle from '@/components/accompany/navTitle/navTitle.vue';
	import ServiceItem from '@/components/accompany/serviceItem/index.vue';
	import MealItem from '@/components/accompany/tabbar/index/mealItem/index.vue';
	import { ref, getCurrentInstance, reactive, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	const { proxy } = getCurrentInstance() as any;


	const tabList = ref([
		{ name: '打针采血' },
		{ name: '上门换药' },
		{ name: '上门拆线' },
		{ name: '上门拆线' },
		{ name: '上门拆线' }
	])
	const list2 = ref([])
	const list = ref([])
	const shopInfo = ref({})
	const contentHeight : Ref<number> = ref(0)
	onLoad(() => {
		console.log('onLoad')
		let sysInfo = uni.getStorageSync('sysInfo')
		contentHeight.value = sysInfo.screenHeight - sysInfo.statusBarHeight - 44
		console.log(contentHeight)
		getList()
		console.log(list, 'list')
	})
	const titleObj = {
		title: '商家名称',
		isBack: true
	}
	function getList() {
		proxy.$UNIHTTP.getData('/magic/web/app/pz/service/get', { id: 1 }).then((res) => {
			shopInfo.value = res.data.merchant
			shopInfo.value.pic = shopInfo.value.logo
			list.value = res.data.service
			list.value.forEach(item=>{
				if(item.category_id==30){
					list2.value.splice(list2.value.length,0,item)
				}
			})
		})
	}
	function toDetail(e){
		console.log(e,'e')
		uni.navigateTo({
			url:`/pages/accompany-tmp/detail/detail?id=${e.id}`    //"../detail/detail?id="
		})
	}
</script>

<style lang="scss" scoped>
	.bg-item {
		padding: 20rpx 0rpx 52rpx 20rpx;
	}
</style>